<script setup lang="ts">
import { getAssetsFile } from '@/utils/getAssetsFile'
import SvgIcon from './SvgIcon.vue'
import { onMounted, ref } from 'vue'
import { getDataList } from '@/service/JuejinToolsService'

export interface IDataList {
  imgURL: string
  title: string
  desc: string
  span1: string
  span2: string
}
const dataList = ref<IDataList[]>([])
const showBoolean = ref(false)

onMounted(async () => {
  // dataActList.value = []
  dataList.value = await getDataList()
  showBoolean.value = true
})
</script>
<template>
  <div class="tools" v-if="showBoolean">
    <div class="tools-in">
      <div class="header">
        <img src="../assets/img/hot.png" alt="热门" />
        "实用AI工具合集"
      </div>
      <div class="content">
        <a href="#" v-for="data in dataList" :key="data.title">
          <div class="tool-infos">
            <div class="tool-t">
              <img :src="getAssetsFile(data.imgURL as string)" alt="" />
              <div class="bot-detail">
                <div class="bot-title">{{ data.title }}</div>
                <div class="bot-desc">
                  {{ data.desc }}
                </div>
              </div>
            </div>
            <div class="tool-b">
              <div class="bot-icon">
                <!-- <img src="../assets/img/hot.svg" alt="" /> -->
                <SvgIcon name="hot" size="18px" />

                <span>{{ data.span1 }}</span>
                <!-- <img src="../assets/img/star.svg" alt="" /> -->
                <SvgIcon name="star" size="18px" />

                <span>{{ data.span2 }}</span>
              </div>
              <div class="bot-act">开始互动</div>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.tools {
  width: 100%;

  .tools-in {
    margin: 16px 0;
    padding: 0 20px 20px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow:
      0 15px 35px -2px rgba(0, 0, 0, 0.05),
      0 5px 15px 0 rgba(0, 0, 0, 0.05);
    .header {
      padding: 12px 0;
      color: #252933;
      font-size: 16px;
      line-height: 24px;

      img {
        width: 55px;
        vertical-align: bottom;
        background: linear-gradient(
          90deg,
          #fef3ff,
          #f2fcff 74.76%,
          rgba(252, 247, 255, 0.598)
        );
        margin-right: 4px;
        border-radius: 4px;
      }
    }

    .content {
      display: grid;
      grid-gap: 8px;
      grid-template-columns: repeat(4, 1fr);
      width: 100%;

      a {
        text-decoration: none;

        .tool-infos {
          box-sizing: border-box;
          height: 160px;
          border-radius: 4px;
          padding: 16px;
          border: 1px solid #eaedf1;
          background-size: cover;
          background-repeat: no-repeat;
          background-image: url('../assets/img/bgc-card.png');

          .tool-t {
            display: flex;
            justify-content: space-between;

            img {
              width: 48px;
              height: 48px;
              border-radius: 4px;
              margin: 0 0 8px;
            }

            .bot-detail {
              margin-left: 10px;
              height: 86px;
              .bot-title {
                color: #0c0d0e;
                font-size: 14px;
                font-weight: 500;
              }
              .bot-desc {
                display: -webkit-box;
                overflow: hidden;
                white-space: normal;
                text-overflow: ellipsis;
                word-wrap: break-word;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                color: #42464e;
                font-size: 12px;
                font-weight: 400;
                line-height: 20px;
              }
            }
          }

          .tool-b {
            display: flex;
            justify-content: space-between;
            padding-top: 12px;
            border-top: 1px solid #eaedf1;

            .bot-icon {
              display: flex;
              align-items: center;
              color: #8a919f;
              line-height: 20px;
              svg {
                margin-right: 4px;
              }
              span {
                color: #8a919f;
                line-height: 20px;
                margin-right: 12px;
                font-size: 12px;
              }
            }

            .bot-act {
              box-sizing: border-box;
              width: 80px;
              height: 27px;
              font-size: 12px;
              background-color: #007fff;
              color: #fff;
              text-align: center;
              line-height: 27px;
              border-radius: 4px;
              border: none;
              outline: none;
              cursor: pointer;
              transition:
                background-color 0.3s,
                color 0.3s;

              &:hover {
                background-color: #0371df;
                color: #fff;
              }
            }
          }
        }
      }
    }
  }
}
</style>
